<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>图文混排4_2</title>
   <link rel="stylesheet" href="../css/bootstrap4.5.min.css">
   <link rel="stylesheet" href="../css/public.css">
   <style>
      .imgText_mix_4_title {
         padding-left: 40px;
         display: flex;
         flex-direction: column;
         justify-content: center;
      }

      .imgText_mix_4_title h2 {
         color: var(--c_theme);
         font-size: var(--f_title);
         line-height: var(--l_title);
      }

      .imgText_mix_4_title p {
         color: var(--c_subtitle);
         font-size: var(--f_text);
         line-height: var(--l_text);
      }

      .imgText_mix_4_title span {
         color: var(--c_text);
         font-size: var(--f_describe);
         line-height: var(--l_describe);
      }

      .imgText_mix_4_content {
         display: flex;
      }

      .imgText_mix_4_img {
         display: flex;
         border-radius: 10px;
         box-shadow: 0px 0px 20px 1px #e4e4e4;
      }

      .imgText_mix_4_img_1_box {
         padding: 40px 0px 40px 40px;
      }

      .imgText_mix_4_img_2_box {
         padding: 40px;
      }

      .imgText_mix_4_img_1 {
         width: 100%;
         height: 350px;
      }

      .imgText_mix_4_img_1 img {
         width: 100%;
         height: 100%;
         border-radius: 10px;
      }

      .imgText_mix_4_img_text p {
         padding: 16px 0;
         color: var(--c_text);
         font-size: var(--f_text);
         line-height: var(--l_text);
      }

      .imgText_mix_4_img_text span {
         color: var(--c_subtitle);
         font-size: var(--f_describe);
         line-height: var(--l_describe);
      }

      @media (max-width:768px) {
         .imgText_mix_4_content {
            display: initial;
         }

         .imgText_mix_4_img {
            display: initial;
         }

         .imgText_mix_4_title {
            padding: 0 0 30px;
         }

         .imgText_mix_4_img_1_box {
            padding: 0 0 40px;
         }
         .imgText_mix_4_img_2_box {
            padding: 0;
         }

         .imgText_mix_4_img_1 {
            height: 240px;
         }
      }
   </style>
</head>

<body>
   <div class="imgText_mix_4 modular">
      <div class="public_width">
         <div class="imgText_mix_4_content">
            

            <div class="imgText_mix_4_img">
               <div class="imgText_mix_4_img_1_box">
                  <div class="imgText_mix_4_img_1">
                     <img src="../images/img_collection_5_1.png" alt="">
                  </div>
                  <div class="imgText_mix_4_img_text">
                     <p>XXXXX公司办公用品包装设计&印刷品</p>
                     <span>专业的包装设计团队为您挑选更优质得材质打造更好的产品</span>
                  </div>
               </div>

               <div class="imgText_mix_4_img_2_box">
                  <div class="imgText_mix_4_img_1">
                     <img src="../images/img_collection_5_1.png" alt="">
                  </div>
                  <div class="imgText_mix_4_img_text">
                     <p>XXXXX公司办公用品包装设计&印刷品</p>
                     <span>专业的包装设计团队为您挑选更优质得材质打造更好的产品</span>
                  </div>
               </div>
            </div>

            <div class="imgText_mix_4_title">
               <h2>案例展示</h2>
               <p>CASE SHOW</p>
               <span>多年包装行业设计，精英团队亲自把关，专业先进设备，保证生产质量，好包装的使用约等于省下45%的营销成本</span>
               <a href="" class="button_small">MORE</a>
            </div>
         </div>
      </div>
   </div>
</body>

</html>